<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="fullcalendar-1.5.3/fullcalendar.css" media="all" />
	<link rel="stylesheet" type="text/css" href="bootstrap-2.0.4/css/bootstrap.min.css" media="all" />
	<link rel="icon" type="image/ico" href="favicon.ico" media="all" />

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
	<script type="text/javascript" src="knockout-2.1.0.js"></script>
	<script type="text/javascript" src="fullcalendar-1.5.3/fullcalendar.min.js"></script>
	<!-- Bootstrap modal and tabs -->
	<script type="text/javascript" src="bootstrap-2.0.4/js/bootstrap.min.js"></script>
		
	<script type="text/javascript" src="rota.js"></script>
	<script type="text/javascript" src="committee.js"></script>

	<style type="text/css">

		body {
			font-size: 14px;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			}
			
		.row-fluid {
			margin-top: 10px;
			}

		#calendar {
			margin: 0 auto;
			}
		
		.fc-event {
			cursor: pointer;
			}
			
		.link {
			cursor: pointer;
			}
		.message {
			z-index: 10;
			margin-bottom: 0;
			}

	</style>
	
	<title>Sidney Bar Rota</title>
</head>
<body>
	<noscript>Please enable Javascript in your browser to view this page.</noscript>
	
	<div class="modal hide fade alert alert-info" id="help-box">
		<div class="modal-header">
			<button class="close" id="close-info" data-dismiss="modal">&times;</button>
			<h3>Help</h3>
		</div>
		<div class="modal-body">
			
			<p>Click on an available shift to sign up for it.</p>
			<p>Click on your shift to make the shift available again.</p>
			<p>Hover over a shift to see details.</p>
			<p>Rota will auto-update every minute.</p>
			
		 </div>
		 
		 <div class="modal-footer">
		 	<button class="btn" data-dismiss="modal">Close</button>
	 	</div>
	</div>

	<div class="container-fluid">
		<!-- height is a hack - message is 36px -->
		<div class="row-fluid" style="margin-top:0;height:36px;">

			<!-- offset not working -->
			<div class="span2">&nbsp;</div>
			
			<!-- Dynamic messages -->
			<div class="span8">
				<div class="alert alert-success hide message" id="success">
					<button class="close" id="close-success">&times;</button>
					<span id="success-message"></span>
				</div>
			
				<div class="alert alert-error hide message" id="error">
					<button class="close" id="close-error">&times;</button>
					<span id="error-message"></span>
				</div>
			</div>
		</div>
		
		<div class="row-fluid">	
			
			<!-- offset not working -->
			<div class="span2">&nbsp;</div>
			
			<div class="span4">
			
				<span>
									
					<form class="form-inline">
											
						<button class="btn btn-small" id="show-home" data-toggle="tab" data-target="#home">Rota <i class="icon-calendar"></i></button>
						<button class="btn btn-small" id="show-mail" data-toggle="tab" data-target="#mail">Mail <i class="icon-envelope"></i></button>
						
						<span class="hide committee-options">
							<button class="btn btn-small" id="show-staff" data-toggle="tab" data-target="#staff">Staff <i class="icon-user"></i></button>												
							<button class="btn btn-small" id="show-settings" data-toggle="tab" data-target="#settings">Settings <i class="icon-cog"></i></button>

						</span>
					</form>
					
				</span>			
				
			</div>

			<div class="span4" style="text-align: right;">
				<em><span id="welcome"></span></em>&nbsp;
				<span class="hide committee-options">
					<button type="button" class="btn btn-warning" data-toggle="button" id="committee-mode" title="Alternatively, click Ctrl while clicking a shift">Edit <i class="icon-pencil"></i></button>
				</span>
				<button class="btn btn-small btn-info" id="open-info" data-toggle="modal" data-target="#help-box">Help <i class="icon-info-sign icon-white"></i></button>
			</div>
		</div>
			
		<div class="row-fluid">
			<!-- offset not working -->
			<div class="span2">&nbsp;</div>
			
			<div class="span8">
				<!-- body content -->
							
				<div class="tab-content">
			
					<div class="tab-pane active" id="home">
					
						<div id='calendar'></div>
					
					</div>
					
					<div class="tab-pane" id="mail">
					
						<form class="form-horizontal" action="#" data-bind="submit: EmailModel.send">
							<fieldset>
								<legend>Email Staff List</legend>
								<div class="control-group" data-bind="with: EmailModel">
																		
									<label class="control-label" for="email-staff-experienced">Experienced</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="email-staff-experienced" data-bind="checked: experienced" />
											<a href="mailto-staff.php?experienced=true" target="_blank">[Mailto]</a>
										</label>
									</div>
									
									<label class="control-label" for="email-staff-committee">Committee</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="email-staff-committee" data-bind="checked: committee" />
											<a href="mailto-staff.php?committee=true" target="_blank">[Mailto]</a>
										</label>
									</div>
									
									<label class="control-label" for="email-staff-subject">Subject</label>
									<div class="controls">
										<input type="text" id="email-staff-subject" data-bind="value: subject" />
									</div>
									
									<label class="control-label" for="email-staff-body">Message</label>
									<div class="controls">
										<textarea class="field span12" rows="6" id="email-staff-body" data-bind="value: body"></textarea>
									</div>
								
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
									<button type="reset" class="btn" data-bind="click: EmailModel.reset">Reset</button>
									<a class="btn" href="mailto-staff.php" target="_blank">Mailto Link</a>
								</div>
								
							</fieldset>
						</form>
					
					</div>
									
					<div class="tab-pane" id="staff">
					
						<form class="form-horizontal" id="add-staff" action="#" data-bind="submit: StaffListModel.addStaffMember">
							<fieldset>

								<legend>Add Staff Member</legend>
								<div class="control-group" data-bind="with: StaffListModel.staffMemberToAdd">
								
									<label class="control-label" for="add-staff-crsId">CrsId</label>
									<div class="controls">
										<input type="text" id="add-staff-crsId" data-bind="value: crsId" />
									</div>
								
									<label class="control-label" for="add-staff-forename">Forename</label>
									<div class="controls">
										<input type="text" id="add-staff-forename" data-bind="value: forename" />
									</div>
								
									<label class="control-label" for="add-staff-surname">Surname</label>
									<div class="controls">
										<input type="text" id="add-staff-surname" data-bind="value: surname" />
									</div>	
									
									<label class="control-label" for="add-staff-phone">Phone Number</label>
									<div class="controls">
										<input type="text" id="add-staff-phone" data-bind="value: phone" />
									</div>	
									
									<label class="control-label" for="add-staff-experienced">Experienced</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="add-staff-experienced" data-bind="checked: experienced" />
										</label>
									</div>
									
									<label class="control-label" for="add-staff-committee">Committee</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="add-staff-committee" data-bind="checked: committee" />
										</label>
									</div>
								
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>																																									
								</div>
								
							</fieldset>
						</form>
											
						
						<form class="form-horizontal" id="edit-staff" action="#" data-bind="if: StaffListModel.staffMemberToEdit, submit: StaffListModel.editStaffMember">
							<fieldset>
								<legend>Edit Staff Member</legend>
								<div class="control-group" data-bind="with: StaffListModel.staffMemberToEdit">
								
									<label class="control-label" for="edit-staff-crsId">CrsId</label>
									<div class="controls">
										<input type="text" id="edit-staff-crsId" disabled="disabled" class="disabled" data-bind="value: crsId" />
									</div>
								
									<label class="control-label" for="edit-staff-forename">Forename</label>
									<div class="controls">
										<input type="text" id="edit-staff-forename" data-bind="value: forename" />
									</div>
								
									<label class="control-label" for="edit-staff-surname">Surname</label>
									<div class="controls">
										<input type="text" id="edit-staff-surname" data-bind="value: surname" />
									</div>	
									
									<label class="control-label" for="edit-staff-phone">Phone Number</label>
									<div class="controls">
										<input type="text" id="edit-staff-phone" data-bind="value: phone" />
									</div>	
									
									<label class="control-label" for="edit-staff-experienced">Experienced</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="edit-staff-experienced" data-bind="checked: experienced" />
										</label>
									</div>
									
									<label class="control-label" for="edit-staff-committee">Committee</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="edit-staff-committee" data-bind="checked: committee" />
										</label>
									</div>
								
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
									<button class="btn" id="cancel-edit-staff" data-bind="click: StaffListModel.cancelEditStaffMember">Cancel</button>																																										
								</div>
								
							</fieldset>
						</form>
						
						
						
						<fieldset>
							<legend>Staff</legend>
							
							<table class="table table-striped table-condensed">
								<thead>
									<tr>
										<th></th>
										<th></th>
										<th></th>
										<th>CrsId</th>
										<th>Forename</th>
										<th>Surname</th>
										<th>Phone</th>
										<th style="text-align:center;">Experienced</th>
										<th style="text-align:center;">Committee</th>
									</tr>
								</thead>
								<tbody id="staff-list" data-bind="foreach: StaffListModel.staffList">
									<tr>
										<td><i class=" icon-user link" data-bind="click: $parent.StaffListModel.showStaffMemberInfo" title="Info"></i></td>
										<td><i class="icon-pencil link" data-bind="click: $parent.StaffListModel.showEditStaffMember" title="Edit"></i></td>
										<td><i class="icon-trash link" data-bind="click: $parent.StaffListModel.deleteStaffMember" title="Delete"></i></td>
										<td data-bind="text: crsId"></td>
										<td data-bind="text: forename"></td>
										<td data-bind="text: surname"></td>
										<td data-bind="text: phone"></td>
										<td style="text-align:center;"><span data-bind="if: experienced == 1"><i class="icon-ok"></i></span><span data-bind="if: experienced == 0"><i class="icon-remove"></i></span></td>
										<td style="text-align:center;"><span data-bind="if: committee == 1"><i class="icon-ok"></i></span><span data-bind="if: committee == 0"><i class="icon-remove"></i></span></td>
									</tr>
								</tbody>
							</table>
							
						</fieldset>
					
					</div>
					
					<div class="tab-pane" id="settings">

						<form class="form-horizontal" id="edit-shift" action="#" data-bind="if: BarShiftModel.shiftToEdit, submit: BarShiftModel.editShift">
							<fieldset>
								<legend>Edit Shift - Worker <span id="edit-worker" data-bind="text: BarShiftModel.shiftToEdit().workerNumber"></span> on <span id="edit-date" data-bind="text: BarShiftModel.shiftToEdit().prettyDate"></span></legend>
								<div class="control-group">
									
									<div data-bind="with: BarShiftModel.shiftToEdit">
										<input type="hidden" id="edit-shift-id" data-bind="value: shiftId" />
										<input type="hidden" id="edit-shift-date" data-bind="value: date" />
										<input type="hidden" id="edit-shift-worker-number" data-bind="value: workerNumber" />
										
										<label class="control-label">Experienced Shift</label>
										<div class="controls">
											<label class="checkbox">
												<input type="checkbox" id="edit-shift-experienced" data-bind="checked: experiencedOnly" />
											</label>
										</div>
										
									</div>
									
									<label class="control-label" for="edit-shift-worker">Worker</label>
									<div class="controls">
										<select id="edit-shift-worker" data-bind="options: StaffListModel.staffList, optionsText: 'fullname', optionsValue: 'crsId', optionsCaption: '(unassigned)', value: BarShiftModel.shiftToEdit().worker">
										</select>
									</div>
									
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
									<button class="btn" id="cancel-edit-shift" data-bind="click: BarShiftModel.cancelEditShift">Cancel</button>	
									<button class="btn btn-danger" id="delete-shift" data-bind="click: BarShiftModel.deleteShift">Delete</button>		
								</div>
							</fieldset>
						</form>
				
						<form class="form-horizontal" id="add-shift" action="#" data-bind="submit: BarShiftModel.addShift">
							<fieldset>
								<legend>Add Shift</legend>
								<div class="control-group" data-bind="with: BarShiftModel.shiftToAdd">
									
									<label class="control-label">Experienced Shift</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" id="add-shift-experienced" data-bind="checked: experiencedOnly" />
										</label>
									</div>
										
									<label class="control-label" for="add-shift-date">Date</label>
									<div class="controls">
										<input type="date" class="input-medium" id="add-shift-date" data-bind="value: date" />
									</div>
									
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Add</button>
								</div>
							</fieldset>
						</form>

						<form class="form-horizontal" id="default-shifts" action="#" data-bind="submit: DefaultShiftModel.setDefaultShifts">
							<fieldset>
								<legend>Default Number of Shifts</legend>
								<div class="control-group" data-bind="foreach: DefaultShiftModel.defaultShifts">
									<span class="help-block" data-bind="text: day"></span>
									
									<label class="control-label">
										<em>Workers</em>									
									</label>
									<div class="controls">
										<input type="number" class="input-small" min="1" max="15" data-bind="value: workers" />
									</div>
									
									<label class="control-label" title="The bar steward will work the experienced shift on this night">
										<em>Steward</em>
									</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" data-bind="checked: steward" />
										</label>
									</div>
									
									<label class="control-label" title="There will be an on-call shift on this night">
										<em>On-Call</em>
									</label>
									<div class="controls">
										<label class="checkbox">
											<input type="checkbox" data-bind="checked: oncall" />
										</label>
									</div>
												
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
									<button class="btn" id="cancel-default-shifts" data-bind="click: DefaultShiftModel.updateDefaultShifts">Cancel</button>
								</div>
								
							</fieldset>
						</form>

						<form class="form-horizontal" id="default-times" action="#" data-bind="submit: DefaultShiftModel.setDefaultTimes">
							<fieldset>
								<legend>Default Shift Times</legend>
								<div class="control-group" data-bind="foreach: DefaultShiftModel.defaultTimes">
									
									<div data-bind="if: worker == 0">
										<span class="help-block" data-bind="text: weekday"></span>
										
									</div>
									
									<label class="control-label">
										<strong data-bind="text: workerName"></strong>&nbsp;
									</label>
									<div class="controls">
										<input type="time" class="input-small" data-bind="value: start" />
										&nbsp;&#8211;&nbsp; 
										<input type="time" class="input-small" data-bind="value: end" />
									</div>
																					
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
									<button class="btn" id="cancel-default-shifts" data-bind="click: DefaultShiftModel.updateDefaultTimes">Cancel</button>
								</div>
								
							</fieldset>
						</form>

						
						<form class="form-horizontal" id="bar-dates" action="#" data-bind="submit: DefaultShiftModel.setBarOperatingDates">
							<fieldset>
								<legend>Bar Dates</legend>
								<div class="control-group" data-bind="with: DefaultShiftModel">
								
									<label class="control-label">Open</label>
									<div class="controls">
										<input type="date" class="input-medium" data-bind="value: barOpen" />
									</div>
									
									<label class="control-label">Close</label>
									<div class="controls">
										<input type="date" class="input-medium" data-bind="value: barClose" />
									</div>
															
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
									<button class="btn" id="cancel-default-shifts" data-bind="click: DefaultShiftModel.getBarOperatingDates">Cancel</button>
								</div>
								
							</fieldset>
						</form>
						
						<form class="form-horizontal" id="bar-history" action="#" data-bind="submit: HistoryModel.lookupWorkers">
							<fieldset>
								<legend>History</legend>
								<div class="control-group" data-bind="with: HistoryModel">
								
									<label class="control-label">Date</label>
									<div class="controls">
										<input type="date" class="input-medium" data-bind="value: date" />
									</div>
															
								</div>
								
								<div class="form-actions">
									<button type="submit" class="btn btn-primary">Submit</button>
								</div>
								
							</fieldset>
						</form>
						
					</div>
				
				</div>

			</div>
		</div>
	</div>
</body>
</html>
